<template>
  <div class="wrapper" :style="{ paddingLeft: left }">
    <div class="scroll-content" id="item">
      <div class="item" v-for="(item, index) in data" :key="index">
        <div class="row">
          <van-image :src="item.avatar" class="image" round />
          <div class="text fz20 ml20">{{ item.nickname }}购买</div>
          <div
            class="fz20"
            style="margin: 0 0.02rem"
            :style="{ color: LEVEL_MAP[item.level].color }"
          >
            {{ LEVEL_MAP[item.level].title }}
          </div>
          <van-image
            :src="item.cover"
            class="mr20"
            style="
              width: 0.4rem;
              height: 0.4rem;
              margin-left: 0.05rem;
              border-radius: 0.04rem;
            "
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { LEVEL_MAP } from "@/utils/tool";
const { proxy } = getCurrentInstance();
const props = defineProps({
  left: { type: String, default: "0rem" },
  data: { type: Array, default: [] },
});
let length = props.data.length;
let translateX = -length + "rem";
let duration = length * 1.2 + "s";
</script>
<style scoped>
.wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.scroll-content {
  line-height: 0.48rem;
  position: relative;
  white-space: nowrap;
  width: 100%;
}
.item {
  display: inline-block;
  margin-left: 0.1rem;
  height: 0.48rem;
  border-radius: 0.24rem;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}
.image {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 0.24rem;
  margin-left: -0.02rem;
}

.text {
  opacity: 0.7;
}
@keyframes move {
  from {
    left: v-bind("props.left");
  }
  to {
    left: v-bind(translateX);
  }
}
#item {
  animation: move v-bind(duration) linear;
  animation-iteration-count: infinite;
}
</style>